<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="handleJump" data-type="BACK">
					<image class="title_bar_left_icon" :src='STATIC_URL+"5.png"'></image>
				</view>
				<view class="title_bar_center">
					退货
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="shop_list">
			<view class="shop_item flex">
				<view class="item_left_img">
					<u-lazy-load :image="orderShop.product_image" img-mode="aspectFill" height="180" border-radius="8"></u-lazy-load>
				</view>
				<view class="item_right">
					<view class="shop_name">{{orderShop.product_name}}</view>
					<view class="specification">规格：{{orderShop.specification ? orderShop.specification : '无'}}</view>
					<view class="shop_price flex align-center justify-between">
						<view class="price_text">
							<template v-if="user.is_show_price == 1">
								<text class="price_1">￥</text>
								<text class="price_2">{{orderShop.price}}</text>
								<text class="price_3">/{{filterDictionary(orderShop.product_unit)}}</text>
							</template>
							<text class="price_3" v-else>单位：{{filterDictionary(orderShop.product_unit)}}</text>
						</view>
						<view class="shop_num flex align-center justify-end">
							<image @tap.stop="countPre" :src='STATIC_URL+"19.png"' mode="aspectFill"></image>
							<input v-model="lose_count" class="shop_num_input" placeholder="1" type="text"></input>
							<image v-if="lose_count < Number(orderShop.count)" @tap.stop="countNext" :src='STATIC_URL+"20.png"' mode="aspectFill"></image>
							<view v-else style="width: 60rpx;height: 40rpx;"></view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="content_bg">
			<view class="content_ti">退货备注</view>
			<view class="textarea_info flex">
				<image class="textarea_info_le" :src='STATIC_URL+"41.png"' mode=""></image>
				<view class="textarea_info_ri">
					<textarea class="textarea_info_ri_text" v-model="body" placeholder="输入您想描述的退货情况..." placeholder-style="font-size:28rpx;color:rgba(61,61,61,0.5);" maxlength="200"></textarea>
				</view>
			</view>
			<view class="text_num flex align-center justify-end">{{body.length}}/500</view>
		</view>
		<view class="content_bg">
			<view class="content_ti">退货图片</view>
			<view class="img_list">
				<view class="img_item" v-for="(v, k) in imgList" :key="k">
					<image @tap.stop="previewImage(k)" :src='v' mode="aspectFill"></image>
					<u-icon @click="delImg(k)" class="del_icon" name="close-circle-fill" size="32" color="red"></u-icon>
				</view>
				<view class="img_item" @tap.stop="uploadImg" v-if="imgList.length < 6">
					<image :src='STATIC_URL+"42.png"' mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="save_btn" @tap.stop="submitInfo">提交</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		data() {
			return {
				image: '/static/index/3.png',
				body: "",
				orderShop: {},
				lose_count: 1,
				"thumb": [],
				"is_submit": false,
				"isShow": false,
				"imgList": [],
				"maxImg": 6,
				user: {}
			}
		},
		onLoad() {
			this.orderShop = global.orderShop;
			// this.lose_count = Number(this.orderShop.count);
			// console.log(this.orderShop);
		},
		onShow() {
			this.user = global.userInfo;
		},
		watch: {
			lose_count() {
				if (this.lose_count > Number(this.orderShop.count)) {
					this.lose_count = Number(this.orderShop.count);
				}
			}
		},
		methods: {
			countPre() {
				if (this.lose_count == 1) {
					return;
				}
				this.lose_count = Number(this.lose_count) - 1;
			},
			countNext() {
				this.lose_count = Number(this.lose_count) + 1;
			},
			// 提交异常
			submitInfo() {
				if (this.is_submit) return;
				if (isNaN(Number(this.lose_count))) {
					this.$message.info('请输入正确的数量');
					return;
				}
				if (this.lose_count <= 0) {
					this.$message.info('商品退货数量必须大于0');
					return;
				}
				// if (this.lose_count > Number(this.orderShop.count)) {
				// 	this.$message.info('退货数量大于购买数量');
				// 	return;
				// }
				if (!this.body) {
					this.$message.info('请填写退货描述');
					return;
				}
				this.is_submit = true;
				this.$api.post(global.apiUrls.gylReturnOrder, {
					id: this.orderShop.id,
					return_count: this.lose_count,
					return_reason: this.body,
					return_image: this.imgList.length > 0 ? this.imgList.join(',') : ''
				}).then(res => {
					this.$message.info(res.data.message);
					if (res.data.code == 200) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							});
						}, 800)
					} else {
						this.is_submit = false;
					}
				}).catch(err => {
					this.is_submit = false;
				})
			},
			// 图片上传
			uploadImg() {
				let _this = this;
				uni.chooseImage({
					count: _this.maxImg,
					sourceType: ['album', 'camera'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '上传中'
						})
						for(let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: global.API_BASE_URL + global.apiUrls.gylUploadImg, //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'image',
								formData: {},
								header: {
									'Authorization': 'Bearer ' + global.token
								},
								success: (uploadFileRes) => {
									uni.hideLoading();
									let result = JSON.parse(uploadFileRes.data);
									console.log(result);
									if (result.code == 200) {
										// _this.user.photo = result.data.photo;
										_this.imgList.push(global.API_BASE_URL + result.data.url);
										_this.maxImg = 6 - _this.imgList.length;
									} else {
										_this.$message.info(result.message);
									}
								},
								fail: (err) => {
									console.log(err);
									uni.hideLoading();
									_this.$message.info('图片上传失败，请重试');
								}
							});
						}
						
					}
				});
			},
			// 预览图片
			previewImage(index) {
				let _this = this;
				uni.previewImage({
					current: index,
					urls: _this.imgList
				})
			},
			delImg(index) {
				this.imgList.splice(index, 1);
				this.maxImg = 6 - this.imgList.length;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #f5f5f5;
		background-size: 100% auto !important;
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			z-index: 10;
			position: fixed;
			top: 0rpx;
		
			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
		
				.title_bar_left {
					width: 50rpx;
					.title_bar_left_icon {
						width: 18rpx;
						height: 32rpx;
					}
				}
		
				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}
		
				.title_bar_right {
					width: 50rpx;
				}
			}
		}
		.save_btn {
			width: 700rpx;
			height: 80rpx;
			background: #41AF36;
			border-radius: 50rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #fff;
			text-align: center;
			line-height: 80rpx;
			position: fixed;
			bottom: 32rpx;
			left: 25rpx;
		}
	}
	.shop_list {
		padding: 20rpx 20rpx 0;
		.shop_item {
			background: #fff;
			border-radius: 10rpx;
			padding: 30rpx 20rpx;
			.item_left_img {
				width: 180rpx;
				height: 180rpx;
			}
			/deep/.u-lazy-item {
				width: 180rpx !important;
				height: 180rpx !important;
			}
			.item_right {
				width: calc(100% - 180rpx);
				padding: 0 0 0 30rpx;
				.shop_name {
					font-weight: 500;
					font-size: 32rpx;
					color: #3D3D3D;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				.specification {
					margin-top: 16rpx;
					color: #999;
					font-size: 24rpx;
				}
				.shop_price {
					margin-top: 28rpx;
					.price_text {
						.price_1 {
							color: #D43C3B;
							font-size: 24rpx;
							font-weight: 600;
						}
						.price_2 {
							color: #D43C3B;
							font-size: 40rpx;
							font-weight: 600;
						}
						.price_3 {
							color: #989898;
							font-size: 24rpx;
							font-weight: 500;
						}
					}
					.shop_num {
						image {
							width: 60rpx;
							height: 40rpx;
						}
						.shop_num_input {
							text-align: center;
							margin: 0 12rpx;
							font-weight: 400;
							font-size: 30rpx;
							color: #3D3D3D;
							width: 80rpx;
						}
					}
				}
			}
		}
	}
	.content_bg {
		margin: 20rpx 20rpx 0;
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		.textarea_info {
			margin-top: 30rpx;
			.textarea_info_le {
				width: 40rpx;
				height: 40rpx;
				margin-right: 30rpx;
			}
			.textarea_info_ri {
				width: calc(100% - 60rpx);
				.textarea_info_ri_text {
					width: 100%;
					height: 200rpx;
					font-size: 28rpx;
					padding: 5rpx 0;
				}
			}
		}
		.text_num {
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(61,61,61,0.5);
		}
		.img_list {
			overflow: hidden;
			margin-top: 24rpx;
			.img_item {
				float: left;
				width: 120rpx;
				height: 120rpx;
				margin: 0 16rpx 16rpx 0;
				position: relative;
				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
				.del_icon {
					position: absolute;
					top: 0;
					right: 0;
					z-index: 10;
				}
			}
		}
	}
	.content_ti {
		font-weight: 500;
		font-size: 36rpx;
		color: #3D3D3D;
		padding-left: 7rpx;
	}
	.codeLogin_fd1_1_c2 {
		font-size: 26rpx;
		color: #41AF36;
		font-weight: 500;
		margin-left: 30rpx;
	}
</style>